<template>
  <div class="product-edit">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>{{ isEdit ? '编辑商品' : '新增商品' }}</span>
        </div>
      </template>
      
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入商品名称" />
        </el-form-item>
        
        <el-form-item label="商品分类" prop="categoryId">
          <el-select v-model="form.categoryId" placeholder="请选择商品分类">
            <el-option
              v-for="item in categoryOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="商品封面" prop="cover">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :headers="uploadHeaders"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :on-progress="handleUploadProgress"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :on-change="handleUploadChange"
            accept="image/jpeg,image/png,image/gif,image/webp"
          >
            <img v-if="form.cover" :src="form.cover" class="avatar" crossorigin="anonymous" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
          <div v-if="form.cover" class="current-url">
            当前图片URL: {{ form.cover }}
          </div>
          <div class="image-tip">图片建议尺寸：800px × 800px，大小不超过2MB</div>
        </el-form-item>
        
        <el-form-item label="商品图片" prop="gallery">
          <div class="gallery-container">
            <el-upload
              :action="uploadUrl"
              :headers="uploadHeaders"
              :on-success="handleGalleryUploadSuccess"
              :on-error="handleUploadError"
              :before-upload="beforeAvatarUpload"
              list-type="picture-card"
              :file-list="fileList"
              :on-remove="handleGalleryRemove"
              accept="image/jpeg,image/png,image/gif,image/webp"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
          </div>
          <div class="image-tip">图片建议尺寸：800px × 800px，大小不超过2MB</div>
        </el-form-item>
        
        <el-form-item label="商品原价" prop="originalPrice">
          <el-input-number
            v-model="form.originalPrice"
            :precision="2"
            :step="0.01"
            :min="0"
          />
        </el-form-item>
        
        <el-form-item label="商品售价" prop="price">
          <el-input-number
            v-model="form.price"
            :precision="2"
            :step="0.01"
            :min="0"
          />
        </el-form-item>
        
        <el-form-item label="商品库存" prop="stock">
          <el-input-number
            v-model="form.stock"
            :precision="0"
            :step="1"
            :min="0"
          />
        </el-form-item>
        
        <el-form-item label="商品描述" prop="description">
          <el-input
            v-model="form.description"
            type="textarea"
            rows="4"
            placeholder="请输入商品描述"
          />
        </el-form-item>
        
        <el-form-item label="商品状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="0">下架</el-radio>
          </el-radio-group>
          <div class="form-item-help">
            <p>当前状态: {{ form.status === 1 ? '上架' : '下架' }}</p>
            <p>状态值类型: {{ typeof form.status }}</p>
          </div>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">保存</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import api from '@/api'
import { formatImageUrl, checkImageAccessibility } from '@/utils/image-helper'

const route = useRoute()
const router = useRouter()
const formRef = ref(null)
const loading = ref(false)

// 是否编辑模式
const isEdit = computed(() => Boolean(route.params.id))

// 表单数据
const form = reactive({
  name: '',
  categoryId: '',
  cover: '',
  gallery: [],
  originalPrice: 0,
  price: 0,
  stock: 0,
  description: '',
  status: 1
})

// 表单验证规则
const rules = {
  name: [
    { required: true, message: '请输入商品名称', trigger: 'blur' }
  ],
  categoryId: [
    { required: true, message: '请选择商品分类', trigger: 'change' }
  ],
  cover: [
    { required: true, message: '请上传商品封面', trigger: 'change' }
  ],
  originalPrice: [
    { required: true, message: '请输入商品原价', trigger: 'blur' }
  ],
  price: [
    { required: true, message: '请输入商品售价', trigger: 'blur' }
  ],
  stock: [
    { required: true, message: '请输入商品库存', trigger: 'blur' }
  ]
}

// 分类选项
const categoryOptions = ref([])

// 上传相关
const uploadUrl = '/api/upload/simple'
const uploadHeaders = {
  Authorization: `Bearer ${localStorage.getItem('token')}`,
  // 上传时不需要手动设置Content-Type，el-upload组件会自动使用multipart/form-data
}
const fileList = ref([])

// 静态资源服务器地址
const staticBaseUrl = window.location.origin // 例如 http://localhost:3001

// 获取商品详情
const getDetail = async (id) => {
  try {
    console.log(`开始获取商品ID: ${id} 的详情`)
    const data = await api.products.getProductDetail(id)
    
    if (!data) {
      console.error('获取商品详情返回数据为空')
      ElMessage.error('获取商品详情失败')
      return null
    }
    
    console.log('获取到的商品详情数据:', data)
    
    // 处理不同的返回格式
    let productData = data
    
    // 如果响应中包含list字段，说明是旧格式的返回
    if (data.list && Array.isArray(data.list) && data.list.length > 0) {
      productData = data.list[0]
      console.log('从list中提取商品数据:', productData)
    }
    
    // 防御性检查，确保gallery是一个数组
    if (productData.gallery === undefined || productData.gallery === null) {
      productData.gallery = []
      console.log('商品详情中gallery字段不存在，已初始化为空数组')
    } else if (!Array.isArray(productData.gallery)) {
      // 尝试将非数组的gallery转为数组
      try {
        if (typeof productData.gallery === 'string') {
          if (productData.gallery.trim() === '') {
            productData.gallery = []
          } else {
            // 尝试解析JSON字符串
            try {
              const parsedGallery = JSON.parse(productData.gallery)
              productData.gallery = Array.isArray(parsedGallery) ? parsedGallery : [productData.gallery]
            } catch (e) {
              productData.gallery = [productData.gallery]
            }
          }
        } else {
          productData.gallery = [productData.gallery]
        }
        console.log('转换后的gallery数组:', productData.gallery)
      } catch (e) {
        console.error('转换gallery为数组失败:', e)
        productData.gallery = []
      }
    }
    
    // 确保其他必要字段存在，并转换类型
    if (productData.cover === undefined) productData.cover = ''
    if (productData.name === undefined) productData.name = ''
    if (productData.description === undefined) productData.description = ''
    if (productData.price === undefined) productData.price = 0
    
    // 处理原价字段，优先使用驼峰命名格式
    if (productData.originalPrice !== undefined) {
      productData.originalPrice = parseFloat(productData.originalPrice || 0)
    } else if (productData.original_price !== undefined) {
      productData.originalPrice = parseFloat(productData.original_price || 0)
    } else {
      productData.originalPrice = 0
    }
    
    if (productData.stock === undefined) productData.stock = 0
    if (productData.status === undefined) productData.status = 1
    
    // 确保数字类型字段为数字
    productData.price = parseFloat(productData.price || 0)
    productData.stock = parseInt(productData.stock || 0, 10)
    productData.status = parseInt(productData.status || 1, 10)
    
    // 保证状态值为数字 0 或 1，处理可能的异常值
    if (productData.status !== 0 && productData.status !== 1) {
      console.warn(`商品状态值异常: ${productData.status}，重置为默认值1`)
      productData.status = 1
    }
    
    // 处理分类ID字段
    if (productData.category_id !== undefined && productData.categoryId === undefined) {
      productData.categoryId = parseInt(productData.category_id, 10)
    } else if (productData.categoryId !== undefined) {
      productData.categoryId = parseInt(productData.categoryId, 10)
    }
    
    // 打印转换后的数据便于调试
    console.log('处理后的商品数据:', {
      name: productData.name,
      categoryId: productData.categoryId,
      originalPrice: productData.originalPrice,
      price: productData.price,
      stock: productData.stock,
      status: productData.status
    })
    
    // 更新文件列表
    try {
      fileList.value = productData.gallery.map(url => ({
        url: url || '',
        name: (url && typeof url === 'string') ? url.split('/').pop() : 'unnamed'
      }))
      console.log('文件列表已更新:', fileList.value)
    } catch (e) {
      console.error('处理文件列表失败:', e)
      fileList.value = []
    }
    
    return productData
  } catch (error) {
    console.error('获取商品详情失败:', error)
    console.error('错误详情:', error.response?.data || error.message || error)
    ElMessage.error('获取商品详情失败: ' + (error.response?.data?.message || error.message || '未知错误'))
    return null
  }
}

// 获取分类列表
const getCategories = async () => {
  try {
    const { list } = await api.categories.getCategories()
    categoryOptions.value = list || []
  } catch (error) {
    console.error('获取分类列表失败:', error)
    ElMessage.error('获取分类列表失败')
  }
}

// 上传前验证
const beforeAvatarUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2

  console.log('上传文件:', file)
  console.log('文件类型:', file.type)
  console.log('文件大小:', file.size)
  console.log('上传URL:', uploadUrl)
  console.log('上传头信息:', uploadHeaders)
  console.log('localStorage中的token:', localStorage.getItem('token'))

  if (!isImage) {
    ElMessage.error('只能上传图片文件! (JPEG/PNG/GIF/WEBP)')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB!')
    return false
  }
  
  // 创建临时img元素，测试图片是否可以正常加载
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = (e) => {
    const img = new Image()
    img.crossOrigin = "anonymous"
    img.src = e.target.result
    img.onload = () => {
      console.log('图片加载成功，尺寸:', img.width, 'x', img.height)
    }
    img.onerror = () => {
      console.error('图片加载失败，可能不是有效的图片文件')
      ElMessage.warning('图片加载失败，可能不是有效的图片文件')
    }
  }
  
  return true
}

// 上传进度处理
const handleUploadProgress = (event, file) => {
  console.log('上传进度:', event.percent)
  console.log('上传文件状态:', file)
}

// 上传成功
const handleUploadSuccess = (response, file, fileList) => {
  console.log('上传成功，原始响应:', response)
  
  try {
    // 尝试解析响应数据
    let data = response
    if (typeof response === 'string') {
      try {
        data = JSON.parse(response)
      } catch (e) {
        console.error('解析响应JSON失败:', e)
      }
    }
    
    console.log('解析后的响应数据:', data)
    
    // 获取图片URL - 优先使用apiUrl
    let imageUrl = null
    
    if (data && data.data) {
      // 标准响应结构处理
      if (data.data.apiUrl) {
        // 首选apiUrl（通过API访问的路径）
        imageUrl = data.data.apiUrl
        console.log('使用apiUrl:', imageUrl)
      } else if (data.data.url) {
        // 其次使用标准url
        imageUrl = data.data.url
        console.log('使用url:', imageUrl)
      } else if (data.data.filename) {
        // 如果有文件名，构造API URL
        imageUrl = `${window.location.origin}/api/upload/get/${data.data.filename}`
        console.log('从filename构造API URL:', imageUrl)
      } else if (data.data.path) {
        // 如果有路径，提取文件名并构造API URL
        const filename = data.data.path.split('/').pop()
        imageUrl = `${window.location.origin}/api/upload/get/${filename}`
        console.log('从path提取文件名并构造API URL:', imageUrl)
      }
    } else if (data && data.url) {
      // 简单响应结构
      imageUrl = data.url
      console.log('使用顶层url:', imageUrl)
    }
    
    if (!imageUrl) {
      console.error('无法从响应中提取图片URL:', data)
      ElMessage.warning('图片已上传，但无法获取URL地址')
      return
    }
    
    // 确保URL是完整路径
    if (!imageUrl.startsWith('http')) {
      // 如果是API路径
      if (imageUrl.startsWith('/api/')) {
        imageUrl = `${window.location.origin}${imageUrl}`
      } 
      // 如果是文件名
      else if (!imageUrl.includes('/')) {
        imageUrl = `${window.location.origin}/api/upload/get/${imageUrl}`
      }
      // 其他相对路径
      else if (imageUrl.startsWith('/')) {
        imageUrl = `${window.location.origin}${imageUrl}`
      } else {
        imageUrl = `${window.location.origin}/${imageUrl}`
      }
    }
    
    console.log('最终处理后的图片URL:', imageUrl)
    
    // 设置封面图片URL
    form.cover = imageUrl
    
    // 预加载图片以验证可访问性
    const preloadImg = new Image()
    preloadImg.crossOrigin = "anonymous"
    preloadImg.onload = () => {
      console.log('封面图片预加载成功:', imageUrl)
      ElMessage.success('封面图片上传成功')
    }
    preloadImg.onerror = (e) => {
      console.error('封面图片预加载失败:', imageUrl, e)
      
      // 尝试解析出文件名并使用API路径
      try {
        let filename = imageUrl.split('/').pop()
        const apiUrl = `${window.location.origin}/api/upload/get/${filename}`
        
        if (apiUrl !== imageUrl) { // 避免重复尝试相同URL
          console.log('尝试API访问路径:', apiUrl)
          
          const retryImg = new Image()
          retryImg.crossOrigin = "anonymous"
          retryImg.onload = () => {
            console.log('通过API路径加载成功:', apiUrl)
            form.cover = apiUrl
            ElMessage.success('图片上传成功')
          }
          retryImg.onerror = () => {
            console.error('所有路径都无法加载图片')
            ElMessage.warning('图片已上传，但可能无法正常显示')
          }
          retryImg.src = apiUrl
        } else {
          ElMessage.warning('图片已上传，但可能无法正常显示')
        }
      } catch (parseError) {
        console.error('解析文件名失败:', parseError)
        ElMessage.warning('图片已上传，但可能无法正常显示')
      }
    }
    preloadImg.src = imageUrl
  } catch (error) {
    console.error('处理上传响应时出错:', error)
    ElMessage.error('上传处理失败: ' + error.message)
  }
}

// 上传失败处理
const handleUploadError = (error, file, fileList) => {
  console.error('上传失败:', error)
  console.error('上传失败的文件:', file)
  console.error('当前文件列表:', fileList)
  
  // 尝试解析错误信息
  let errorMsg = '上传失败: '
  
  try {
    if (typeof error === 'string') {
      errorMsg += error
    } else if (error && error.message) {
      errorMsg += error.message
    } else if (error && error.status) {
      errorMsg += `服务器返回错误状态码: ${error.status}`
    } else if (error && error.response) {
      // 解析响应
      const responseText = error.response.data || error.response.statusText || '未知错误'
      errorMsg += `${error.response.status} - ${responseText}`
    } else {
      errorMsg += JSON.stringify(error) || '未知错误'
    }
    
    // 检查网络连接问题
    if (!navigator.onLine) {
      errorMsg = '网络连接已断开，请检查网络连接后重试'
    }
  } catch (parseError) {
    console.error('解析上传错误时出错:', parseError)
    errorMsg += '无法解析错误详情'
  }
  
  ElMessage.error(errorMsg)
}

// 图片集上传成功
const handleGalleryUploadSuccess = (response, file, fileList) => {
  console.log('图片集上传成功，原始响应:', response)
  
  try {
    // 尝试解析响应数据
    let data = response
    if (typeof response === 'string') {
      try {
        data = JSON.parse(response)
      } catch (e) {
        console.error('解析响应JSON失败:', e)
      }
    }
    
    console.log('解析后的响应数据:', data)
    
    // 获取图片URL - 优先使用apiUrl
    let imageUrl = null
    
    if (data && data.data) {
      // 标准响应结构处理
      if (data.data.apiUrl) {
        // 首选apiUrl（通过API访问的路径）
        imageUrl = data.data.apiUrl
        console.log('使用apiUrl:', imageUrl)
      } else if (data.data.url) {
        // 其次使用标准url
        imageUrl = data.data.url
        console.log('使用url:', imageUrl)
      } else if (data.data.filename) {
        // 如果有文件名，构造API URL
        imageUrl = `${window.location.origin}/api/upload/get/${data.data.filename}`
        console.log('从filename构造API URL:', imageUrl)
      } else if (data.data.path) {
        // 如果有路径，提取文件名并构造API URL
        const filename = data.data.path.split('/').pop()
        imageUrl = `${window.location.origin}/api/upload/get/${filename}`
        console.log('从path提取文件名并构造API URL:', imageUrl)
      }
    } else if (data && data.url) {
      // 简单响应结构
      imageUrl = data.url
      console.log('使用顶层url:', imageUrl)
    }
    
    if (!imageUrl) {
      console.error('无法从响应中提取图片URL:', data)
      ElMessage.warning('图片已上传，但无法获取URL地址')
      return
    }
    
    // 确保URL是完整路径
    if (!imageUrl.startsWith('http')) {
      // 如果是API路径
      if (imageUrl.startsWith('/api/')) {
        imageUrl = `${window.location.origin}${imageUrl}`
      } 
      // 如果是文件名
      else if (!imageUrl.includes('/')) {
        imageUrl = `${window.location.origin}/api/upload/get/${imageUrl}`
      }
      // 其他相对路径
      else if (imageUrl.startsWith('/')) {
        imageUrl = `${window.location.origin}${imageUrl}`
      } else {
        imageUrl = `${window.location.origin}/${imageUrl}`
      }
    }
    
    console.log('最终处理后的图片URL:', imageUrl)
    
    // 添加到图片集
    if (!form.gallery) {
      form.gallery = []
    }
    
    // 防止重复添加
    if (!form.gallery.includes(imageUrl)) {
      form.gallery.push(imageUrl)
      console.log('图片已添加到gallery:', form.gallery)
      ElMessage.success('图片已添加到相册')
    } else {
      console.log('图片已存在于gallery中，不重复添加')
      ElMessage.info('该图片已存在于相册中')
    }
    
    // 验证图片是否可以正常加载
    const img = new Image()
    img.crossOrigin = "anonymous"
    img.onload = () => console.log('图库图片预加载成功:', imageUrl)
    img.onerror = (e) => {
      console.error('图库图片加载失败:', imageUrl, e)
      
      // 尝试解析出文件名并使用API路径
      try {
        let filename = imageUrl.split('/').pop()
        const apiUrl = `${window.location.origin}/api/upload/get/${filename}`
        
        if (apiUrl !== imageUrl) { // 避免重复尝试相同URL
          console.log('尝试API访问路径:', apiUrl)
          
          const retryImg = new Image()
          retryImg.crossOrigin = "anonymous"
          retryImg.onload = () => {
            console.log('通过API路径加载成功:', apiUrl)
            // 找到并替换URL
            const index = form.gallery.indexOf(imageUrl)
            if (index !== -1) {
              form.gallery[index] = apiUrl
              console.log('已更新gallery中的URL:', form.gallery)
            }
          }
          retryImg.onerror = () => {
            console.error('所有路径都无法加载图片')
            ElMessage.warning('图片已添加到相册，但可能无法正常显示')
          }
          retryImg.src = apiUrl
        }
      } catch (parseError) {
        console.error('解析文件名失败:', parseError)
      }
    }
    img.src = imageUrl
  } catch (error) {
    console.error('处理上传响应时出错:', error)
    ElMessage.error('上传处理失败: ' + error.message)
  }
}

// 移除图片集图片
const handleGalleryRemove = (file) => {
  const index = form.gallery.indexOf(file.url)
  if (index !== -1) {
    form.gallery.splice(index, 1)
  }
}

// 上传变更
const handleUploadChange = (file, fileList) => {
  console.log('上传状态变更:', file.status)
  console.log('当前文件:', file.name, file.size, file.raw)
  console.log('请求头信息:', uploadHeaders)
  console.log('上传URL:', uploadUrl)
  
  if (file.status === 'ready') {
    console.log('文件准备上传:', file.name)
    
    // 检查token是否存在
    const token = localStorage.getItem('token')
    if (!token) {
      console.error('上传错误: 未找到认证Token')
      ElMessage.error('认证失败，请重新登录')
      router.push('/login')
      return false
    }
  } else if (file.status === 'success') {
    console.log('文件上传成功:', file.name)
  } else if (file.status === 'fail') {
    console.error('文件上传失败:', file.name, file.response)
  }
}

// 文件超出个数限制时的钩子
const handleUploadExceed = (files, fileList) => {
  console.log('文件超出限制:', files)
  console.log('当前的文件列表:', fileList)
  ElMessage.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件`)
}

// 测试上传路径
const testUploadUrl = async () => {
  console.log('当前上传URL:', uploadUrl)
  console.log('上传头信息:', uploadHeaders)
  
  try {
    // 使用fetch手动测试上传
    const formData = new FormData()
    formData.append('file', new Blob(['test content'], { type: 'text/plain' }), 'test-file.txt')
    
    console.log('开始测试上传请求...')
    const response = await fetch(uploadUrl, {
      method: 'POST',
      headers: {
        Authorization: uploadHeaders.Authorization
      },
      body: formData,
      credentials: 'omit'
    })
    
    if (!response.ok) {
      throw new Error(`上传失败: ${response.status} ${response.statusText}`)
    }
    
    const data = await response.json()
    console.log('上传测试结果:', data)
    
    let imageUrl = null
    if (data && data.data && data.data.url) {
      imageUrl = data.data.url
    } else if (data && data.url) {
      imageUrl = data.url
    } else if (data && data.code === 200 && data.data) {
      imageUrl = data.data.path || data.data.src || data.data.fileUrl
    }
    
    if (imageUrl) {
      const formattedUrl = formatImageUrl(imageUrl)
      console.log('格式化后的URL:', formattedUrl)
      ElMessage.success(`测试上传成功，URL: ${formattedUrl}`)
    } else {
      ElMessage.success('测试上传请求成功，但未找到URL，请查看控制台日志')
    }
  } catch (error) {
    console.error('上传测试失败:', error)
    ElMessage.error('测试上传请求失败: ' + error.message)
  }
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    
    // 确保所有必填字段都有正确的数据类型
    const submitData = {
      ...form,
      categoryId: form.categoryId ? parseInt(form.categoryId, 10) : null,
      originalPrice: parseFloat(form.originalPrice || 0),
      price: parseFloat(form.price || 0),
      stock: parseInt(form.stock || 0, 10),
      status: parseInt(form.status, 10), // 确保状态是数字类型
      // 确保gallery是数组
      gallery: Array.isArray(form.gallery) ? form.gallery : []
    }
    
    console.log('提交商品数据:', JSON.stringify(submitData))
    console.log('分类ID类型:', typeof submitData.categoryId, '值:', submitData.categoryId)
    console.log('原价类型:', typeof submitData.originalPrice, '值:', submitData.originalPrice)
    console.log('状态类型:', typeof submitData.status, '值:', submitData.status)
    
    if (!submitData.categoryId) {
      ElMessage.error('请选择商品分类')
      return
    }
    
    if (isEdit.value) {
      const id = route.params.id
      console.log(`正在更新商品ID: ${id}，数据:`, submitData)
      await api.products.updateProduct(id, submitData)
      ElMessage.success('更新成功')
    } else {
      console.log('正在添加新商品，数据:', submitData)
      await api.products.addProduct(submitData)
      ElMessage.success('添加成功')
    }
    
    // 添加延时后跳转到商品列表页，确保数据保存完成
    setTimeout(() => {
      console.log('准备跳转到商品列表页')
      router.replace({
        path: '/products/index',
        query: {
          refresh: Date.now() // 添加时间戳作为刷新标志
        }
      })
    }, 800)
  } catch (error) {
    console.error('保存失败:', error)
    console.error('错误详情:', error.response?.data || error.message || '未知错误')
    ElMessage.error('保存失败: ' + (error.response?.data?.message || error.message || '未知错误'))
  }
}

// 取消
const handleCancel = () => {
  router.back()
}

// 检查图片是否存在
const checkImageExists = async (url) => {
  console.log('检查图片URL:', url)
  
  if (!url) {
    console.error('URL为空，无法检查图片')
    return false
  }
  
  try {
    // 创建一个Promise，设置超时
    const timeoutPromise = new Promise((_, reject) => {
      setTimeout(() => reject(new Error('图片加载超时')), 5000)
    })
    
    // 尝试使用Image对象加载图片
    try {
      // 生成一个随机参数，避免缓存
      const timestamp = Date.now()
      const imageUrl = url.includes('?') ? `${url}&_t=${timestamp}` : `${url}?_t=${timestamp}`
      
      console.log('尝试加载图片:', imageUrl)
      
      // 用Promise.race实现超时检测
      await Promise.race([
        new Promise((resolve, reject) => {
          const img = new Image()
          img.onload = () => {
            console.log('图片可以正常访问:', imageUrl)
            console.log('图片尺寸:', img.width, 'x', img.height)
            ElMessage.success('图片检查成功: 可以正常访问')
            resolve(true)
          }
          img.onerror = (event) => {
            console.error('图片加载失败:', imageUrl)
            console.error('错误事件:', event)
            reject(new Error('图片加载失败'))
          }
          img.src = imageUrl
          // 不使用credentials模式
          img.crossOrigin = "anonymous"
        }),
        timeoutPromise
      ])
      
      return true
    } catch (error) {
      console.error('通过Image对象加载图片失败:', error.message)
      
      // 尝试修复URL
      const fixedUrl = fixImageUrl(url)
      if (fixedUrl !== url) {
        console.log('尝试使用修正后的URL:', fixedUrl)
        
        // 如果是封面图，更新封面图URL
        if (form.cover === url) {
          form.cover = fixedUrl
          ElMessage.info('已尝试修复封面图片URL')
        }
        
        const result = await checkImageExists(fixedUrl)
        if (result) return true
      }
      
      // 尝试通过API获取图片
      if (url.includes('/uploads/')) {
        const fileName = url.split('/').pop()
        if (fileName) {
          const apiUrl = `/api/upload/get/${fileName}`
          console.log('尝试通过API获取图片:', apiUrl)
          
          try {
            const response = await fetch(apiUrl, {
              method: 'GET',
              headers: {
                Authorization: uploadHeaders.Authorization
              },
              credentials: 'omit'
            })
            
            if (response.ok) {
              const contentType = response.headers.get('content-type')
              if (contentType && contentType.includes('image/')) {
                ElMessage.success('通过API获取图片成功')
                
                // 如果是封面图，更新封面图URL
                if (form.cover === url) {
                  form.cover = apiUrl
                  ElMessage.info('已更新封面图片为API路径')
                }
                
                return true
              }
            }
          } catch (e) {
            console.error('通过API获取图片失败:', e)
          }
        }
      }
    }
    
    ElMessage.error('图片无法访问，请检查服务器配置或尝试重新上传')
    return false
    
  } catch (error) {
    console.error('检查图片过程中发生异常:', error)
    ElMessage.error('检查图片过程中发生异常: ' + error.message)
    return false
  }
}

// 清除封面
const clearCover = () => {
  form.cover = ''
  ElMessage.success('已清除封面图片')
}

// 添加新的修复图片URL的方法
const fixImageUrl = (url) => {
  if (!url) return url
  
  // 使用导入的formatImageUrl函数代替本地实现
  return formatImageUrl(url);
}

// 初始化
onMounted(() => {
  // 首先获取分类列表
  getCategories().catch(error => {
    console.error('获取分类列表失败:', error)
    ElMessage.error('获取分类列表失败')
  })
  
  // 如果是编辑模式，先尝试从sessionStorage获取商品数据
  if (isEdit.value) {
    const id = route.params.id
    console.log(`正在获取商品详情，ID: ${id}`)
    
    // 尝试从sessionStorage获取数据
    const cachedProduct = sessionStorage.getItem('productToEdit')
    if (cachedProduct) {
      try {
        const productData = JSON.parse(cachedProduct)
        console.log('从sessionStorage获取到商品数据:', productData)
        
        if (productData.id == id) { // 使用非严格等于比较，因为可能类型不同
          console.log('使用缓存的商品数据初始化表单')
          
          // 确保表单数据更新
          Object.keys(productData).forEach(key => {
            if (form[key] !== undefined) {
              form[key] = productData[key]
            }
          })
          
          // 特别处理状态字段，确保正确赋值
          if (productData.status !== undefined) {
            console.log('设置商品状态, 缓存值:', productData.status, '类型:', typeof productData.status)
            // 确保状态为数字类型
            const statusValue = parseInt(productData.status, 10)
            form.status = statusValue === 0 ? 0 : 1 // 确保只有0和1两种状态
            console.log('最终设置的表单状态值:', form.status, '类型:', typeof form.status)
          }
          
          // 更新文件列表
          if (productData.gallery && Array.isArray(productData.gallery)) {
            fileList.value = productData.gallery.map(url => ({
              url: url || '',
              name: (url && typeof url === 'string') ? url.split('/').pop() : 'unnamed'
            }))
          }
          
          // 清除缓存，避免影响下次编辑
          sessionStorage.removeItem('productToEdit')
          
          // 返回，不再从服务器获取
          return
        }
      } catch (error) {
        console.error('解析缓存的商品数据失败:', error)
        // 解析失败，继续从服务器获取
      }
    }
    
    // 如果缓存中没有数据或数据不匹配，从服务器获取
    loading.value = true
    getDetail(id)
      .then(response => {
        if (!response) {
          console.warn('未获取到商品详情数据，无法初始化表单')
          ElMessage.error('获取商品详情失败，请返回重试')
          return
        }
        
        console.log('商品详情数据已加载到表单中:', response)
        
        // 确保表单数据更新
        Object.keys(response).forEach(key => {
          if (form[key] !== undefined) {
            form[key] = response[key]
          }
        })
        
        // 特别处理状态字段，确保正确赋值
        if (response.status !== undefined) {
          console.log('设置商品状态, 原始值:', response.status, '类型:', typeof response.status)
          // 先转换为数字类型
          const statusValue = parseInt(response.status, 10)
          console.log('转换后的状态值:', statusValue, '类型:', typeof statusValue)
          
          // 确保状态为 0 或 1
          if (statusValue !== 0 && statusValue !== 1) {
            console.warn(`商品状态值异常: ${statusValue}，重置为默认值1`)
            form.status = 1 // 默认为上架状态
          } else {
            form.status = statusValue
          }
          
          console.log('最终设置的表单状态值:', form.status, '类型:', typeof form.status)
        }
        
        // 验证封面图片是否可以正常访问
        if (form.cover) {
          setTimeout(() => {
            checkImageExists(form.cover)
          }, 1000) // 延迟1秒检查，确保页面已完全加载
        }
        
        // 验证图库中的图片是否可以正常访问
        if (form.gallery && Array.isArray(form.gallery) && form.gallery.length > 0) {
          setTimeout(() => {
            form.gallery.forEach((imageUrl, index) => {
              if (imageUrl) {
                console.log(`检查图库图片 #${index+1}:`, imageUrl)
                checkImageExists(imageUrl)
              }
            })
          }, 2000) // 延迟2秒检查图库图片
        }
      })
      .catch(error => {
        console.error('获取产品详情失败:', error)
        ElMessage.error('获取产品详情失败')
      })
      .finally(() => {
        loading.value = false
      })
  } else {
    console.log('当前是新增商品模式，不需要获取详情')
  }
})
</script>

<style scoped>
.product-edit {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.image-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
}

.avatar-uploader {
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 4px;
  object-fit: cover;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
}

.current-url {
  margin-top: 8px;
  font-size: 12px;
  color: #606266;
  word-break: break-all;
}

.form-item-help {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
  line-height: 1.4;
}

:deep(.el-upload) {
  width: 100px;
  height: 100px;
  line-height: 100px;
}

/* 防止el-upload中的图片引起CORS问题 */
:deep(.el-upload img),
:deep(.el-image img) {
  object-fit: cover;
  crossorigin: anonymous;
}

/* 图库容器样式 */
.gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
</style>